<template>
  <div class="chart-container">

    <div class="search">
      <el-form ref="searchFormDom" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="设备编号" prop="deviceId">
          <el-input v-model="searchForm.deviceId" class="mt_12" size="small" style="width: 376px; margin-right: 65px;"
            placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="searchForm.state" size="small" style="width: 376px; margin-right: 65px;"
            placeholder="请选择">
            <el-option label="状态一" value="shanghai"></el-option>
            <el-option label="状态二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery" style="width: 90px;" size="small"> 查询</el-button>
          <el-button @click="onReset" style="width: 90px;" size="small" > 重置</el-button>

        </el-form-item>
        <el-form-item>
          <div style="color: #1890FF;">
            展开
            <i class="el-icon-arrow-down"></i>
          </div>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="onAdd" style="width: 90px;" class="mt_30" size="small"
        icon="el-icon-plus">新建</el-button>
      <el-button @click="onBatchOperation" style="width: 90px;margin-right: 14.5px;" size="small">批量操作</el-button>
      <el-select v-model="operation" placeholder="更多操作" style="width: 135px;">
        <el-option label="更多操作" value="更多操作"></el-option>
        <el-option label="操作一" value="shanghai"></el-option>
        <el-option label="操作二" value="beijing"></el-option>
      </el-select>
    </div>
    <div class="connect">
      <div class="tip">
        <div class="tip-detial">
          <i class=" el-icon-warning" style="color: #1890FF;"></i>
          已选择<span style="color: #1890FF;">{{ selectNumber }}</span>项
        </div>
        <div style="color: #1890FF;cursor: pointer;" @click="onclearAll">清空</div>
      </div>
      <el-table ref="deviceTable" :data="tableData" tooltip-effect="dark" style="width: 100%;"
        :header-cell-style="{ backgroundColor: '#fafafa', color: '#000' }" :cell-style="{ color: '#000' }"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55">
        </el-table-column>

        <el-table-column prop="deviceId" align="center" label="设备编号" width="120">
        </el-table-column>
        <el-table-column prop="Ip" align="center" label="IP地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="switch" label="开/关" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch v-model="scope.row.switch" active-color="#aed8ff" @change="onChangeSwitch(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="SYN" align="center" label="SYN" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="state" align="center" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
          <div class="flexCenter">
            <div class="drop" :style="{backgroundColor: stateColor[scope.row.state].color}"></div>
            <div style="width: 50px; text-align: center;">
              {{stateColor[scope.row.state].title  }}
            </div>
          </div>
           
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" align="center" label="更新时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="onEdit()" type="text" size="small">
              编辑
            </el-button>
            <i class="el-icon-refresh refresh" @click="onInitialization()"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
    </div>
    <!-- <chart height="100%" width="100%" /> -->
  </div>
</template>

<script>
import Chart from '@/components/Charts/Keyboard'

export default {
  name: 'KeyboardChart',
  components: { Chart },
  data() {
    return {
      searchForm: {
        deviceId: '',
        state: '',
    
      },
      // 操作
          operation: '更多操作',
      // 表格数据
      tableData: [{
        deviceId: 'YSRP',
        Ip: '192.168.0.233',
        switch: false,
        SYN: 'Y',
        state: 1,
        updateTime: '2024-07-09 12:12:12'
      }, {
        deviceId: 'YSRP',
        Ip: '192.168.0.233',
        switch: false,
        SYN: 'Y',
        state: 2,
        updateTime: '2024-07-09 12:12:12'
      }, {
        deviceId: 'YSRP',
        Ip: '192.168.0.233',
        switch: false,
        SYN: 'Y',
        state: 3,
        updateTime: '2024-07-09 12:12:12'
      }, {
        deviceId: 'YSRP',
        Ip: '192.168.0.233',
        switch: false,
        SYN: 'Y',
        state: 2,
        updateTime: '2024-07-09 12:12:12'
      }],
      // 状态数据列表
      stateColor: [
       {color: '#BFBFBF',
        title: '关闭'
       },
       {
        color: '#F5222D',
        title: '异常'
       }
        ,{
   color: '#1890FF',
   title: '运行中'
        },{
   color: '#A2EF4D',
   title: '已上线'
        }
      ],
      // 被选中的行集合
      selectList: [

      ]
    }
  },
  computed: {
    // 选中了多少个
    selectNumber() {
      return  this.selectList.length
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    onQuery() {
      alert('点击了查询')
    },
    // 重置
    onReset() {
      this.$refs['searchFormDom'].resetFields();
    },
    // 添加
    onAdd() {
     alert('点击了添加')
    },
    // 批量操作
    onBatchOperation() {
      alert('点击了批量操作')
    },
    // 编辑
    onEdit() {
     alert('点击了编辑')
    },
    // 初始化
    onInitialization() {
     alert('点击了初始化')
    },
    // 选中行事件
    handleSelectionChange(list) {
    this.selectList = list
    console.log(this.selectList.length);
    },
    // 清空
    onclearAll() {
          this.$refs.deviceTable.clearSelection();
      },
    // 开关
    onChangeSwitch() {
     
    }
  }

}
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 152px);
  padding: 20px;
  background-color: #ffffff;
  font-family: SourceHanSansSC-regular;
  font-size: 16px;
}



.search {
  width: 100%;

}
.connect {
  height: calc(100vh - 344px);
  overflow: hidden;
}
.foot {
  display: flex;
  justify-content: end;
}
.tip {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-left: 20px;
  background-color: #E6F7FF;
}

.tip-detial {
  margin-right: 60px;
}

.refresh {
  color: #54BCBD;
  font-size: 16px;
  font-weight: 800;
  margin-left: 40px;
}
.drop {
  width: 13px;
  height: 13px;
  border-radius: 16px;
}

::v-deep .el-pagination.is-background .btn-prev{
  background-color: #ffffff;
  border: 1px solid #D9D9D9;
}
::v-deep .el-pagination.is-background .el-pager li {
  background-color: #ffffff;
  border: 1px solid #D9D9D9;
}
::v-deep .el-pagination.is-background .btn-next {
  background-color: #ffffff;
  border: 1px solid #D9D9D9 ;
}
</style>
